<template>
    <div class="testView01 full-body">
        <g-drawer ref="g_drawer">
            <g-label>
                <span class="inline-block ver-mid col-1">账号：</span>
                <div class="inline-block col-9">
                    <g-input class="inline-block col-10" input_class="inp input-10" name="account"></g-input>
                </div>
                
            </g-label><br/>
            <g-label>
                <div class="inline-block ver-mid col-1">密码：</div>
                <div class="inline-block col-9">
                <g-input class="inline-block col-10" type="password" name="passwd" input_class="inp input-10" ></g-input>
                </div>
            </g-label><br/>
            <div>
                <div  class="inline-block  ver-mid col-1">性别：</div>
                <div class="inline-block col-9">
                <g-label class="inline-block col-2">
                    <g-input class="inline-block" type="radio" value="1" name="sex"></g-input>
                    <div class="ver-mid inline-block">：男</div>
                </g-label>
                <g-label class="inline-block col-2">
                    <g-input class="inline-block" type="radio" value="0" name="sex"></g-input>
                    <div class="ver-mid inline-block">：女</div>
                </g-label>  
                </div>
                
            </div><br/>
            <div>
                <div class="inline-block ver-mid col-1">测试a：</div>
                <div class="inline-block col-9">
                    <label class="inline-block" style="margin-right:20px">
                        <input class="inline-block form_label ver-mid" type="checkbox" value="Service" name="genFile"/>
                        <div class="ver-mid inline-block ver-mid"> Service</div>
                    </label>
                    <label class="inline-block" style="margin-right:20px">
                        <input class="inline-block form_label ver-mid" type="checkbox" value="Entity" name="genFile"/>
                        <div class="ver-mid inline-block ver-mid"> Entity</div>
                    </label>
                </div>
                
            </div><br/>
            <div>
                <div class="inline-block ver-mid col-1">测试b：</div>
                <div class="inline-block col-9">
                <g-label class="inline-block col-2">
                    <g-input class="inline-block" type="checkbox" value="a" name="b"></g-input>
                    <span class="ver-mid inline-block">: b1</span>
                </g-label>
                <g-label class="inline-block col-2">
                    <g-input class="inline-block" type="checkbox" value="b" name="b"></g-input>
                    <span class="ver-mid inline-block">: b2</span>
                </g-label>
                <g-label class="inline-block col-2">
                    <g-input class="inline-block" type="checkbox" value="c" name="b"></g-input>
                    <span class="ver-mid inline-block">: b3</span>
                </g-label>
                <g-label class="inline-block col-2">
                    <g-input class="inline-block" type="checkbox" value="d" name="b"></g-input>
                    <span class="ver-mid inline-block">: b4</span>
                </g-label>
                </div>
                
            </div><br/>
            <g-label>
                <div class="ver-mid inline-block col-1">爱好：</div>
                <g-f-select :data="data" class="col-9" name="hobbi" ref="g_f_select"></g-f-select>
            </g-label><br/>
        </g-drawer>

        
        <!-- <g-message ref="message" :msg_data="msg_data"></g-message> -->

        <button class="btn secondary_btn" @click="activeDrawer('right')">抽屉弹出-right</button>
        <button class="btn secondary_btn" @click="activeDrawer('left')">抽屉弹出-left</button>
        <button class="btn secondary_btn" @click="activeDrawer('up')">抽屉弹出-up</button>
        <button class="btn secondary_btn" @click="activeDrawer('down')">抽屉弹出-down</button>

        <br/>
        <button class="btn secondary_btn" @click="messageActive('success','吖；京东方；按揭房；按实际发；司法局吖；是打飞机；按时附件；按时附件；按时地方；吖司法司法安抚安抚吖；是发发司法解释发垃圾费')" >测试弹窗-success</button>
        <button class="btn secondary_btn" @click="messageActive('warning')" >测试弹窗-warning</button>
        <button class="btn secondary_btn" @click="messageActive('error')" >测试弹窗-error</button>
        

        <g-form ref="aa">
            <div>
                <div class="inline-block ver-mid col-1">包名</div>
                <div class="inline-block col-9">
                    <input class="form_label inp input-10"  placeholder="例如：com.xxx.xxx" type="text" name="packName"/>
                </div>
            </div>
        </g-form>
        <g-form ref="bb" :id="'p2'">
            <div>
                <div class="inline-block ver-mid col-1">包名2</div>
                <div class="inline-block col-9">
                    <input class="form_label inp input-10"  placeholder="例如：com.xxx.xxx" type="text" name="packName2"/>
                </div>
            </div>
        </g-form>

        <button @click="getab()">获取</button>
    </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue';
export default{
    name:'testView01',
    setup(){
        const { proxy } =  getCurrentInstance();

        let g_drawer = ref(null);
        let g_f_select = ref(null);
        let aa = ref(null);
        let bb = ref(null);
        let data = [
            {id:1001,name:'1001-Hello'},
            {id:1002,name:'1002-Hello'},
            {id:1003,name:'1003-Hello'},
            {id:1004,name:'1004-Hello'},
            {id:1005,name:'1005-Hello'},
        ]
        let activeDrawer = (direct)=>{
            let data = {
                title:'抽屉Body-title',
                direct:direct,
                success:(formData)=>{
                    console.log(formData);
                    g_drawer.value.change(data);
                    // console.log(g_f_select.value.main_text.innerText);
                }
            }
            g_drawer.value.change(data);
            
        }

        // 
        let message = ref(null);
        let msg_data = ref(null);
        let messageActive =(type,body)=>{
           proxy.$createMessage({
            title:"没有问题",
            type:type,
            body:body
           });
           
        }

        let getab = ()=>{
            let aData = aa.value.getFormData();
            let bData = bb.value.getFormData();
            console.log(aData);
            console.log(bData);
        }
        return {
            g_drawer,data,msg_data,
            activeDrawer,g_f_select,
            message,messageActive,
            aa,bb,getab
        }

    }
}
</script>
<style>
    
</style>